<template>
	<view class="gui-flex gui-rows gui-nowrap gui-space-between" style="height:100rpx;">
		<view class="gui-footer-icon-buttons" @tap="navChang(0)">
			<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons"
				:class="[navCurrents == 0 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe63b;</text>
			<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color"
				:class="[navCurrents == 0 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">首页</text>
		</view>
		<view class="gui-footer-icon-buttons" @tap="navChang(1)">
			<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons"
				:class="[navCurrents == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe62f;</text>
			<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color"
				:class="[navCurrents == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">订单</text>
		</view>
		<!-- 凸出按钮占位  普通按钮 实现下面的 gui-footer-icon-buttons 即可 -->

		<view class="gui-footer-icon-buttons" @tap="navChang(2)">
			<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons"
				:class="[navCurrents == 4 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe6fe;</text>
			<text class="gui-footer-icon-buttons-text gui-block-text"
				:class="[navCurrents == 4 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">我的</text>
		</view>
	</view>
</template>

<script>
	export default {
		name  : "gui-footer-shop-custom",
		data() {
			return {
				navCurrent:0
			}
		},
		props: ['navCurrents'],
		methods:{
			
			navChang: function(index) {
				this.navCurrent = index;
				
				if (index == 0) {
					uni.reLaunch({
						url: '/pages/index/shop_index'
					})
				}
			
				if (index == 1) {
					uni.reLaunch({
						url: '/pages/order/shop_list'
					})
				}
			
				if (index == 2) {
					uni.reLaunch({
						url: '/pages/my/shop_index'
					})
				}
			},
		}
	}
</script>

<style>
	.gui-card-footer {
		margin-top: 25rpx;
	}
	
	.gui-card-footer-item {
		width: 100rpx;
		text-align: center;
		flex: 1;
		line-height: 38rpx;
		font-size: 26rpx;
		color: #666666;
	}
	
	.gui-footer-icon-buttons {
		width: 130rpx;
		height: 80rpx;
		padding: 10rpx;
		flex: 1;
		position: relative;
		margin: 0;
		background-color: #F8F8F8;
	}
	
	.gui-footer-buttons-ab {
		position: absolute;
		z-index: 101;
		left: 325rpx;
		top: 0rpx;
		width: 110rpx;
		height: 150rpx;
	}
	
	.gui-footer-buttons-ab-icon {
		width: 110rpx;
		height: 110rpx;
		line-height: 120rpx;
		text-align: center;
		font-size: 68rpx;
		background-color: #F7F8FA;
		border-radius: 100rpx;
	}
	
	/* #ifndef APP-NVUE */
	.gui-card-footer-item {
		display: block;
	}
	
	.gui-box-shadow {
		box-shadow: 0px 0px 3rpx #999999;
	}
	
	/* #endif */
</style>